<!-- 游戏记录 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @reset="onHideDetails(true)" @sort="sortTable"
    @changeTh="data.dialogVisible = true">
    <template #form>
      <Operator ref="OperatorRef" @query="queryItem" />
      <el-form-item label="游戏：">
        <el-select v-model="data.query.game_id" placeholder="请选择" filterable>
          <el-option label="全部" :value="-1" />
          <el-option v-for="item in indexStore.gameArray" :key="item.value" :label="'【' + item.value + '】' + item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="游戏玩法：">
        <el-select v-model="data.query.small_game_type" placeholder="请选择" filterable>
          <el-option label="全部" :value="-1" />
          <el-option v-for="item in data.gameTypeList" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select class="selectWidth120" v-model="data.query.search_type" placeholder="请选择">
          <el-option v-for="item in data.conditionList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input class="width200" v-model="data.query.search_value" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="牌局编号：">
        <el-input type="number" v-model="data.query.round_id_str" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="日期时间：">
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
          end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" clearable />
      </el-form-item>
    </template>
    <template #button>
      <div class="flex">
        <el-button :type="data.dayIndex == 1 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(1)">今日</el-button>
        <el-button :type="data.dayIndex == 2 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(2)">昨日</el-button>
        <el-button :type="data.dayIndex == 3 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(3)">上周</el-button>
        <el-button :type="data.dayIndex == 4 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(4)">本周</el-button>
        <el-button :type="data.dayIndex == 5 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(5)">本月</el-button>
        <el-button :type="data.dayIndex == 6 ? 'success' : ''" :disabled="indexStore.loading"
          @click="changeTime(6)">上月</el-button>
      </div>
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
          :sortable="item.sortable ? 'custom' : false" show-overflow-tooltip>
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content> {{item.tips}} </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'save_time_stamp'" #default="scope">
            {{ setTimestampTime(scope.row.save_time_stamp) }}
          </template>
          <template v-if="item.prop == 'round_id_str'" #default="scope">
            <span class="item_check" @click="checkUser(scope.row.round_id_str, 2)">
              {{ scope.row.round_id_str }}
            </span>
          </template>
          <template v-if="item.prop == 'account_id'" #default="scope">
            <span class="item_check" @click="checkUser(scope.row.account_id, 1)">
              {{ scope.row.account_id }}
            </span>
          </template>
          <template v-if="item.prop == 'account'" #default="scope">
            <span class="item_details" @click="checkUser(scope.row.account, 3), data.checkedItem = scope.row">
              {{ scope.row.account }}
            </span>
          </template>
          <template v-if="item.prop == 'agent_id'" #default="scope">
            {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
            ({{ selectToLabel(COUNTRY, scope.row.agent_base_info?.area ?? '') }})
          </template>
          <template v-if="item.prop == 'game_type'" #default="scope">
            <el-tag>{{ selectToLabel(GAMETYPE, scope.row.game_type) }}</el-tag>
          </template>
          <template v-if="item.prop == 'game_id'" #default="scope">
            <div class="gameIcon">
              <div><img class="game-icon" :src="selectToLabel(GAMEICON, scope.row.game_id)" alt=""></div>
              {{ selectToLabel(indexStore.gameArray, scope.row.game_id) }}
            </div>
          </template>
          <template v-if="item.prop == 'game_mini'" #default="scope">
            <el-button v-if="scope.row.small_list" type="success"
              @click="checkGameMini(scope.row, scope.row.small_list)">小游戏</el-button>
            <el-button v-if="scope.row.eliminate_list" type="primary"
              @click="checkGameMini(scope.row, scope.row.eliminate_list)">连消</el-button>
            <span v-if="!scope.row.eliminate_list && !scope.row.small_list"> - </span>
          </template>
          <template v-if="item.prop == 'enter_money'" #default="scope">
            <span :class="colorClass(scope.row.enter_money)">{{ BigWan(scope.row.enter_money) }}</span>
          </template>
          <template v-if="item.prop == 'bet'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.bet) }}</span>
          </template>
          <template v-if="item.prop == 'after_settlement_money'" #default="scope">
            <span :class="colorClass(scope.row.after_settlement_money)">{{
              BigWan(scope.row.after_settlement_money)
            }}</span>
          </template>
          <template v-if="item.prop == 'win_lose'" #default="scope">
            <span :class="colorClass(BigMinus(BigWan(scope.row.win), BigWan(scope.row.bet)))">
              {{ BigMinus(BigWan(scope.row.win), BigWan(scope.row.bet)) }}
            </span>
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" label="操作" width="90" align="center">
        <template #header>
          <el-tooltip effect="dark" content="点击查看游戏记录详情" placement="top">
            <el-icon class="ques-tips">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
          详情
        </template>
        <template #default="scope">
          <el-button :disabled="!scope.row.log_details_id && !scope.row.game_type ? true : false" type="primary"
            v-permiss="'/system/destroyManager'" size="small" @click="checkDetails(scope.row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="onHideDetails" @resetData="resetData" />
  <!-- 玩家信息详情 -->
  <UserDetails :show="data.isUserDetails" @onHideDetails="onHideDetails" :checkedItem="data.checkedItem" />
  <!-- 游戏详情 -->
  <GameDetail :show="data.isShowDetails" :checkedItem="data.checkedItem" @onHideDetails="onHideDetails" />

  <!-- 小游戏详情 -->
  <el-dialog v-model="data.isShowGameDetails" width="75%" title="小游戏记录" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="onHideDetails" top="12vh">
    <div class="dialogMaxHeight" style="padding: 0;">
      <SearchTable :list="data.listDetails" :showSet="false" :showForm="false">
        <template #form></template>
        <template #table>
          <template v-for="(item, index) in data.fields" :key="index">
            <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
              show-overflow-tooltip>
              <template #header>
                <el-tooltip v-if="item.tips" effect="dark" placement="top">
                  <template #content>
                    {{item.tips}}
                  </template>
                  <el-icon class="ques-tips">
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
                {{ item.label }}
              </template>
              <template v-if="item.prop == 'save_time_stamp'" #default="scope">
                {{ setTimestampTime(scope.row.save_time_stamp) }}
              </template>
              <template v-if="item.prop == 'round_id_str'" #default="scope">
                <span class="item_check" @click="checkUser(scope.row.round_id_str, 2)">
                  {{ scope.row.round_id_str }}
                </span>
              </template>
              <template v-if="item.prop == 'account_id'" #default="scope">
                <span class="item_check" @click="checkUser(scope.row.account_id, 1)">
                  {{ scope.row.account_id }}
                </span>
              </template>
              <template v-if="item.prop == 'account'" #default="scope">
                <span class="item_details" @click="checkUser(scope.row.account, 3), data.checkedItem = scope.row">
                  {{ scope.row.account }}
                </span>
              </template>
              <template v-if="item.prop == 'agent_id'" #default="scope">
                {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
                ({{ selectToLabel(COUNTRY, scope.row.agent_base_info?.area ?? '') }})
              </template>
              <template v-if="item.prop == 'game_type'" #default="scope">
                <el-tag>{{ selectToLabel(GAMETYPE, scope.row.game_type) }}</el-tag>
              </template>
              <template v-if="item.prop == 'game_mini'" #default="scope">
                <el-tag>{{ scope.row.small_game_type == 1 ? '连消' : scope.row.small_game_type == 2 ? '小游戏' : '-'
                  }}</el-tag>
              </template>
              <template v-if="item.prop == 'game_id'" #default="scope">
                <div class="gameIcon">
                  <div><img class="game-icon" :src="selectToLabel(GAMEICON, scope.row.game_id)" alt=""></div>
                  {{ selectToLabel(indexStore.gameArray, scope.row.game_id) }}
                </div>
              </template>
              <template v-if="item.prop == 'enter_money'" #default="scope">
                <span :class="colorClass(scope.row.enter_money)">{{ BigWan(scope.row.enter_money) }}</span>
              </template>
              <template v-if="item.prop == 'bet'" #default="scope">
                <span class="colorText">{{ BigWan(scope.row.bet) }}</span>
              </template>
              <template v-if="item.prop == 'after_settlement_money'" #default="scope">
                <span :class="colorClass(scope.row.after_settlement_money)">{{
                  BigWan(scope.row.after_settlement_money)
                }}</span>
              </template>
              <template v-if="item.prop == 'win_lose'" #default="scope">
                <span :class="colorClass(BigMinus(BigWan(scope.row.win), BigWan(scope.row.bet)))">
                  {{ BigMinus(BigWan(scope.row.win), BigWan(scope.row.bet)) }}
                </span>
              </template>
            </el-table-column>
          </template>
          <el-table-column fixed="right" label="操作" width="90" align="center">
            <template #header>
              <el-tooltip effect="dark" content="点击查看游戏记录详情" placement="top">
                <el-icon class="ques-tips">
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
              详情
            </template>
            <template #default="scope">
              <el-button :disabled="!scope.row.log_details_id && !scope.row.game_type ? true : false" type="primary"
                v-permiss="'/system/destroyManager'" size="small" @click="checkDetails(scope.row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </template>
      </SearchTable>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import GameDetail from '@/views/player/components/game-details.vue'
import UserDetails from '@/views/player/components/user-details.vue'
import { getGameReport } from '@/api/player'
import { throttle, selectToLabel, colorClass, sortsObjectArray } from '@/utils/index'
import { getDateDay, getWeek, getSevenWeek, getMonth, setTimeValue, isOneDay, setTimestampTime } from '@/utils/time'
import { BigWan, BigMinus } from '@/utils/math'
import { COUNTRY } from '@/config/country'
import { GAMETYPE, GAMEICON } from '@/config/eunm'
import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    success: -1,
    game_id: -1,
    agent_id: -1,
    small_game_type: -1,
    operated_id: -1,
    round_id_str: '' as string | number,
    search_type: 1,
    search_value: '' as string | number,
    date: getSevenWeek(),
    order_field: '', // 排序字段
    order_value: '', // 排序方式 asc升序  desc 倒序
  },
  list: [],
  total: 0,
  dayIndex: 0,
  fields: [
    { label: '创建时间', prop: 'save_time_stamp', width: '180', visible: true, tips: '此条游戏记录的生成时间，也为玩家当局游戏结算的时间' },
    { label: '牌局编号', prop: 'round_id_str', width: '195', visible: true, tips: '此条游戏记录的编号，唯一，对应客户端的展示用于比对查找' },
    { label: '平台ID', prop: 'account_id', width: '150', visible: true, tips: '玩家ID编号，唯一' },
    { label: '平台昵称', prop: 'account', width: '150', visible: true, tips: '玩家名称' },
    { label: '商户/地区', prop: 'agent_id', width: '200', visible: true, tips: '此玩家所属商户和地区' },
    { label: '游戏名称', prop: 'game_id', width: '200', visible: true, tips: '此条记录的产生来源，游戏的名称说明' },
    { label: '游戏类型', prop: 'game_type', width: '120', visible: true, tips: '此游戏的类型，区分为百人、MiniGame、老虎机' },
    { label: '小游戏', prop: 'game_mini', width: '120', visible: true, tips: '游戏的玩法：普通，连消，小游戏' },
    { label: '玩家输赢', prop: 'win_lose', width: '150', visible: true, sortable: true, tips: '此局游戏玩家的输赢情况，正为玩家盈利，负为玩家亏损' },
    { label: '下注前', prop: 'enter_money', width: '180', visible: true, tips: '玩家在此局游戏下注前的持有余额数量' },
    { label: '结算后', prop: 'after_settlement_money', width: '180', visible: true, sortable: true, tips: '玩家在此局游戏下注、结算后的持有余额数量' },
    { label: '下注金额', prop: 'bet', width: '150', visible: true, sortable: true, tips: '玩家在此局游戏的下注额度' },
  ],
  listDetails: [],
  dialogVisible: false,
  isUserDetails: false,
  checkedItem: {} as any,
  conditionList: [
    { label: '平台ID', value: 1 },
    { label: '平台昵称', value: 3 }
  ],
  gameTypeList: [
    { label: '连消', value: 1 },
    { label: '小游戏', value: 2 }
  ],
  isShowDetails: false,
  isShowGameDetails: false,
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}

onMounted(async () => {
  const param = history.state
  if (param.date && param.game_id) {
    data.query.game_id = param.game_id
    data.query.date = [param.date, param.date]
    data.query.search_type = 1
    data.query.search_value = param.account_id
  }
  getSearchList()
})

const getSearchList = async () => {
  data.query = setTimeValue(data.query)
  indexStore.setPageLoading(true)
  let res = await getGameReport(data.query)
  indexStore.setPageLoading(false)
  data.list = res.data.list
  data.total = res.data.total
}

// 设置快捷查询时间
const changeTime = throttle((type: number) => {
  if (data.dayIndex == type) return false
  data.dayIndex = type
  switch (type) {
    case 1:
      data.query.date = [getDateDay(0), getDateDay(0)]
      break;
    case 2:
      data.query.date = [getDateDay(-1), getDateDay(-1)]
      break;
    case 3:
      data.query.date = getWeek(-1)
      break;
    case 4:
      data.query.date = getWeek(0)
      break;
    case 5:
      data.query.date = getMonth(0)
      break;
    case 6:
      data.query.date = getMonth(-1)
      break;
  }
  getSearchList()
}, 1000)

// 排序
const sortTable = (val: any) => {
  if (isOneDay(data.query.date)) {
    data.query.order_value = val.order
    data.query.order_field = val.prop
    getSearchList()
  } else {
    data.query.order_value = ''
    data.query.order_field = ''
    ElMessage.warning({
      message: '请选择一天的时间进行排序'
    })
  }
}

// 查看详情
const checkDetails = async (row: any) => {
  data.isShowDetails = true;
  Object.assign(data.checkedItem, row)
}

// 查看小游戏详情
const checkGameMini = async (row: any, list: any) => {
  data.listDetails = sortsObjectArray(list, 'id', 'asc')
  data.isShowGameDetails = true
}

// 查看玩家详情
const checkUser = (val: any, type: number) => {
  if (type == 2) {
    data.query.round_id_str = val
  } else {
    if (type == 3) {
      data.isUserDetails = true
    } else {
      data.query.search_type = type
      data.query.search_value = val
    }
  }
  getSearchList()
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
  getSearchList()
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const OperatorRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.isUserDetails = false
  data.dialogVisible = false
  data.dayIndex = 0
  if (data.isShowDetails) {
    data.isShowDetails = false
  } else {
    data.isShowGameDetails = false
  }
  if (show) {
    data.query = {
      page: 1,
      size: 50,
      success: -1,
      game_id: -1,
      small_game_type: -1,
      agent_id: -1,
      operated_id: -1,
      round_id_str: '' as string | number,
      search_type: 1,
      search_value: '' as string | number,
      date: getSevenWeek(),
      order_field: '', // 排序字段
      order_value: '', // 排序方式 asc升序  desc 倒序
    }
    getSearchList()
    OperatorRef.value.onHideDetails()
  }
}
</script>

<style scoped lang="scss">
.border-box {
  font-size: 14px;
  color: var(--text);
}

.fily {
  display: flex;
  flex-wrap: wrap;

  .fily-list {
    width: 50%;
  }
}

.flight {
  width: 100%;
}

.list {
  font-weight: bold;
  height: 36px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
</style>
<style lang="scss">
.tableBox {
  .table-hight {
    min-height: 300px !important;
    max-height: 300px !important;
    overflow: auto;
    z-index: 1000;
  }
}
</style>
